<template>
  <div>
    <div class="search">
      <div class="input">事项编号：<el-input size="small" maxlength="12" v-model="postMessage.number"></el-input></div>
      <div>
        问题类型：
        <el-cascader
          ref="downLoadLvlRef"
          v-model="value"
          :options="classification"
          :props="{
            expandTrigger: 'hover',
            label: 'text',
            value: 'value',
            children: 'children',
          }"
          @change="handleChange"
          size="small"
        ></el-cascader>
      </div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
    <div class="form">
      <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="date" label="时效" align="center" width="100">
          <template slot-scope="scope">
            <div class="Signal" :style="{ '--background-color': scope.row.color }"></div>
          </template>
        </el-table-column>
        <el-table-column prop="number" label="事项编号" align="center"> </el-table-column>
        <el-table-column prop="subTypeName" label="问题类型" align="center" width="100"> </el-table-column>
        <el-table-column prop="createTime" label="上报时间" align="center"> </el-table-column>
        <el-table-column prop="location" label="事件地点" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="mdescribe" label="问题描述" align="center" show-overflow-tooltip> </el-table-column>
        <el-table-column prop="statusName" label="事项状态" align="center"> </el-table-column>
        <el-table-column fixed="right" label="类型" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.reportedNumber > 1"><el-tag>二次上报</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 1"><el-tag type="danger">一次退回</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 2"><el-tag type="danger">二次退回</el-tag></div>
            <div v-else-if="scope.row.returnNumber == 3"><el-tag type="danger">三次退回</el-tag></div>
            <div v-else-if="scope.row.reportedNumber == 1 && !scope.row.returncause">
              <el-tag type="success">正常上报</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" align="center">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">办理</el-button>
            <!-- <el-button @click="confirm(scope.row)" type="text" size="small" style="color: #2ac139">确认</el-button> -->
            <!-- <el-button @click="returnmessage(scope.row)" type="text" size="small" style="color: #888888"
              >退回</el-button
            > -->
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="totalPage * 10" @current-change="changesize" class="page">
        </el-pagination>
      </div>
    </div>
    <div class="confirm">
      <el-button size="small" type="primary" @click="check">批量确认</el-button>
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-form ref="form" :model="sentmessage" label-width="100px">
        <el-form-item label="退回原因：">
          <el-input
            type="textarea"
            show-word-limit
            resize="none"
            :rows="4"
            maxlength="50"
            placeholder="请限制字数在50个以内"
            v-model="sentmessage.returncause"
          >
          </el-input>
        </el-form-item>
        <div class="btn">
          <el-button @click="dialogVisible = false" style="margin-right: 20px">取 消</el-button>
          <el-button type="primary" @click="fila">确 定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-drawer title="事项详情" :visible.sync="drawer" :direction="direction" :before-close="handleClose" size="1000px">
      <Dispatch @Tips="Tips" :win-state="drawer" :postmessage="this.parentMessage"></Dispatch>
    </el-drawer>
  </div>
</template>

<script>
import Dispatch from './Dispatch/Dispatch.vue'
import Seats from '@/api/Seats'
import api from '@/api/api'
export default {
  data() {
    return {
      dialogVisible: false,
      totalPage: '',
      parentMessage: {},
      direction: 'rtl',
      drawer: false,
      multipleSelection: [],
      classification: [],
      postMessage: {
        dutyId: 0,
        endTime: '',
        location: '',
        number: '',
        pageNo: 1,
        pageSize: 9,
        responsibilityId: 0,
        seatId: 0,
        startTime: '',
        statusList: [],
        subTypeId: 0,
        typeId: 0,
      },
      sentmessage: {
        invalidResult: '',
        matterId: '',
        responsibilityId: '',
        returncause: '',
        status: '',
      },
      value: '',
      tableData: [],
    }
  },
  methods: {
    // returnmessage(scope) {
    //   this.sentmessage.matterId = scope.matterId
    //   this.dialogVisible = true
    // },
    fila() {
      if (this.sentmessage.returncause == '') {
        this.$message({
          message: '退回原因不能为空！',
          type: 'error',
        })
        return
      } else {
        this.sentmessage.status = 9
        api.Submit(this.sentmessage).then(res => {
          if (res.code == 200) {
            this.$message({
              message: res.msg,
              type: 'success',
            })
          }
          this.sentmessage.returncause = ''
          this.getSeatslist()
          this.dialogVisible = false
        })
      }
    },
    search() {
      Seats.agency(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.totalPage = res.data.totalPage
          if (res.data.records == [] || res.data.records.length == 0) {
            this.$message({
              message: '查询数据无结果！',
              type: 'info',
            })
          }
        }
      })
    },
    getlist() {
      Seats.classification().then(res => {
        if (res.code == 200) {
          res.data.forEach(item => {
            let lItem = {
              text: item.typeName,
              value: item.id,
              children: [],
            }
            item.subTypeDTOS.forEach(items => {
              lItem.children.push({
                text: items.subTypeName,
                value: item.id + '-' + items.id,
              })
            })
            this.classification.push(lItem)
          })
        }
      })
    },
    handleChange() {
      let arr = this.value[1].split('-')
      this.postMessage.subTypeId = arr[1]
    },
    getSeatslist() {
      Seats.agency(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.totalPage = res.data.totalPage
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = []
      val.forEach(item => {
        this.multipleSelection.push(item.matterId)
      })
    },
    check() {
      if (this.multipleSelection.length == 0) {
        this.$message({
          message: '请选择事项后再点击确认',
          type: 'error',
        })
      } else {
        this.$confirm('确认都通过么')
          .then(_ => {
            Seats.batch(this.multipleSelection).then(res => {
              if (res.code == 200) {
                this.$message({
                  message: '已通过！',
                  type: 'success',
                })
              }
              this.getSeatslist()
            })
          })
          .catch(_ => {
            this.$message({
              message: '已取消',
              type: 'info',
            })
          })
      }
    },
    choose(val) {
      this.parentMessage.responsibilityName = val
    },
    handleClose(done) {
      done()
    },
    // confirm(scope) {
    //   this.$confirm('确认派遣？')
    //     .then(_ => {
    //       this.sentmessage.matterId = scope.matterId
    //       this.sentmessage.status = 7
    //       api.Submit(this.sentmessage).then(res => {
    //         if (res.code == 200) {
    //           this.sentmessage = {
    //             invalidResult: '',
    //             matterId: '',
    //             responsibilityId: '',
    //             returncause: '',
    //             status: '',
    //           }
    //           this.getSeatslist()
    //         }
    //       })
    //     })
    //     .catch(_ => {})
    // },
    Tips() {
      this.drawer = false
      this.$message({
        message: '操作成功！',
        type: 'success',
      })
      this.getSeatslist()
    },
    turnback(scope) {
      this.$confirm('确认退回？')
        .then(_ => {
          this.sentmessage.matterId = scope.matterId
          this.sentmessage.status = 9
          api.Submit(this.sentmessage).then(res => {
            if (res.code == 200) {
              this.$message({
                message: '退回成功',
                type: 'success',
              })
              this.sentmessage = {
                invalidResult: '',
                matterId: '',
                responsibilityId: '',
                returncause: '',
                status: '',
              }
              this.getSeatslist()
            }
          })
        })
        .catch(_ => {
          this.$message({
            message: '已取消',
            type: 'info',
          })
        })
    },
    changesize(row) {
      this.postMessage.pageNo = row
      this.getSeatslist()
    },
    handleClick(scope) {
      this.drawer = true
      this.parentMessage = scope
    },
  },
  mounted() {
    let currentTimer = setInterval(() => {
      Seats.agency(this.postMessage).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.records
          this.totalPage = res.data.totalPage
        }
      })
    }, 10000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(currentTimer)
      currentTimer = null
    })
  },
  components: {
    Dispatch,
  },
  created() {
    this.getSeatslist()
    this.getlist()
  },
}
</script>

<style lang="scss" scoped>
@import './agency.scss';
</style>
